<template>
	<view :style="{'--color':color}">
		<status-bar title='搜索'></status-bar>
		<view class="searchView bgwhite flexac" :style="{top:totalHeight+'px'}">
			<view class="searhch">
				<view class="iconfont icon-btn_search color_66 size34"></view>
				<input type="text" v-model="searchTxt" class="flex-1 height p-left20 color_33 size26"
					placeholder="请输入搜索~" confirm-type="search" @confirm="confirm">
			</view>
		</view>


		<view class="row p-top140"></view>
		<view class="viewbox auto bgwhite bor_radius_10" v-if="pageData.length">
			<view class="list" @click="toDetails(item)" v-for="(item,index) in pageData" :key="index">
				<image :src="$imgUrls(item.img)" mode="aspectFill" class="shop_img"></image>
				<view class="flex-1 d-flex f-column  m-left16">
					<text class="size30 black bold">{{item.name}}</text>
					<text class="color_99 h7 ellipsis">{{item.info}}</text>
					<view class="row j-sb m-top12">
						<view class="d-flex a-center">
							<text class="color_E9 size28 bold400">￥{{item.price}}</text>
							<text class="color_99 h6 bold400 line-through m-left10">￥{{item.full_price}}</text>
						</view>
						<view class="iconfont icon-zengjia size36"></view>
					</view>
				</view>
			</view>
		</view>
		<emptys empty="search" v-if="!pageData.length && !acquiesce" :title="`暂无相关信息`"></emptys>


		<block v-if="acquiesce">

			<view class="viewbox auto " v-if="History.length">
				<view class="row j-sb a-center">
					<text class="color_33 size28 bold">历史搜索</text>
					<view class="iconfont icon-shanchu color_cd size28 p-left20" @click="delSearchHistory"></view>
				</view>
				<view class="row">
					<view class="history" v-for="(item,index) in History" :key="index" @click="historyBtn(item)">
						{{item.title}}</view>


				</view>
			</view>

			<view class="viewbox auto  m-top30" v-if="nominate.length">
				<view class="row j-sb a-center">
					<text class="color_33 size28 bold">热门搜索</text>
				</view>
				<view class="row">
					<view class="history" v-for="(item,index) in nominate" :key="index" @click="historyBtn(item)">
						{{item.title}}</view>
				</view>
			</view>
			<emptys empty="search"></emptys>
		</block>

		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				acquiesce:true,
				searchTxt: '',
				History: [],
				nominate: [],
				pageData: [],
			}
		},
		onShow() {
			this.searchHistory();
			this.recommendation();
			if(this.searchTxt) this.searchGoods();
		},
		methods: {
			confirm(e) {
				const sarch = e.detail.value;
				if (!sarch) return;
				this.searchGoods();
			},
			searchGoods() {
				this.$http.post({
					url: '/singleSaleApi/searchGoods',
					data: {
						title: this.searchTxt,
						mode: 1
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
					this.acquiesce = false;
					console.log(this.acquiesce);
				})
			},
			searchHistory() {
				this.$http.post({
					url: '/singleSaleApi/searchHistory',
					data: {
						mode: 1
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					this.History = result;
				})
			},

			historyBtn(item) {
				this.searchTxt = item.title;
				this.searchGoods();
			},
			delSearchHistory() {
				this.$http.post({
					url: '/singleSaleApi/delSearchHistory',
					data: {
						mode: 1
					}
				}).then(res => {
					if (res.errcode != 100) return;
					this.History = [];
				})
			},

			recommendation() {
				this.$http.post({
					url: '/singleSaleApi/recommendation',
					data: {
						mode: 1
					}
				}).then(res => {
					if (res.errcode != 100) return;
					const result = res.data || [];
					this.nominate = result;
				})
			},
			toDetails(item) {
				this.toUrl(`/pages/goods/goods_detail?goods_id=${item.goods_id}&mode=1`);
			},

		},
		
		computed: {
			...mapState(['share', 'totalHeight', 'System', 'navWidth', 'navHeight', 'color'])
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.searchView {
		width: 100%;
		padding: 0 30rpx;
		height: 100rpx;
		position: fixed;
		left: 0;
		z-index: 100;
	}

	.searhch {
		width: 100%;
		height: 66rpx;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.list {
		width: 100%;
		padding: 20rpx;
		display: flex;
	}

	.shop_img {
		width: 120rpx;
		height: 120rpx;
	}

	.icon-zengjia {
		color: var(--color)
	}

	.history {
		padding: 8rpx 30rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #666666;
		margin-right: 20rpx;
	}
</style>